<template>
   <div class="wrapper">
    <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="item in swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl" alt="Loading...">
        </swiper-slide>
        <!-- <swiper-slide>
            <img class="swiper-img" src="//imgs.qunarzz.com/vs_ceph_vcimg/b8c4527c41649814cc4cf86880abba54.jpeg" alt="Loading...">
        </swiper-slide>
        <swiper-slide>
            <img class="swiper-img" src="//imgs.qunarzz.com/vc/6d/9f/35/b8ad5468f73fd60ec0ced086f6.jpg_92.jpg" alt="Loading...">
        </swiper-slide>
        <swiper-slide>
            <img class="swiper-img" src="http://imgs.qunarzz.com/vc/e3/a1/71/f498dfd3bed948d623c9093252.jpg_92.jpg" alt="Loading...">
        </swiper-slide> -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
   </div>
</template>

<script>
export default {
    name:'HomeSwiper',
    data:function(){
        return{
            swiperOptions:{
                pagination:{
                    el:'.swiper-pagination'
                },
                loop: true
            },
            swiperList:[{
                id:'001',
                imgUrl:'http://imgs.qunarzz.com/vc/e3/a1/71/f498dfd3bed948d623c9093252.jpg_92.jpg'
            },{
                id:'002',
                imgUrl:'//imgs.qunarzz.com/vs_ceph_vcimg/b8c4527c41649814cc4cf86880abba54.jpeg'
            }]
        }
    },
    computed:{
        swiper:function(){
            return this.$refs.mySwiper.$swiper
        }
    },
    mounted:function(){
        console.log('Current Swiper instance object', this.swiper)
        this.swiper.slideTo(3, 1000, false)
    }
}
</script>

<style lang="stylus" scoped>
    .wrapper
        overflow:hidden;
        width :100%;
        height:0;
        padding-bottom:31.25%;
        .swiper-img
            width :100%;
</style>